<template>
	<view class="bgc">
		<view class="persoanl" @click="binding">
			<view class=""><image class="portrait" :src="userInfo.avatarUrl" mode=""></image></view>
			<view class="information">
				<text class="name">{{ userInfo.nickName }}</text>
			</view>
			<view class="informations">
				<text class="phone">{{ phone }}</text>
			</view>
		</view>
		<view class="lists">
			<view class="rider" @click="toUserMsg">
				<image src="../../static/img/rider.png" mode=""></image>
				<view class="othertext">
					乘车人管理
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="rider_s" @click="goDiscount">
				<image src="../../static/img/discounts.png" mode=""></image>
				<view class="othertext">
					优惠券
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<!-- 			<view class="rider_s">
				<image src="../../static/img/code.png" mode=""></image>
				<view class="othertext">我的二维码
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
			<view class="rider_s" @tap="goProblem">
				<image src="../../static/img/issue.png" mode=""></image>
				<view class="othertext">
					常见问题
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="rider_s" @tap="goInquire">
				<image src="../../static/img/station.png" mode=""></image>
				<view class="othertext">
					车站查询
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="rider_s">
				<image src="../../static/img/service.png" mode=""></image>
				<view class="othertext">
					<button id="wxcontact" open-type="contact">微信客服</button>
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="rider_s">
				<image src="../../static/img/phone.png" mode=""></image>
				<view class="othertext" @click="go">
					客服电话
					<text @click="go">96606</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import md5 from 'js-md5';
import newToken from '@/static/http/pageConfig.js';
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			userInfo: new Object(),
			show: '',
			hidden: '',
			phone: '',
			code: 'res.code'
		};
	},
	onLoad() {},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		const that = this;
		uni.getStorage({
			key: 'phone',
			success(res) {
				that.phone = res.data;
			}
		});
	},
	methods: {
		// 点击手机报拨打电话
		go() {
			uni.makePhoneCall({
				// 手机号
				phoneNumber: '96606',
				// 成功回调
				success: res => {},
				// 失败回调
				fail: err => {
					console.log(err);
				}
			});
		},
		goProblem() {
			uni.navigateTo({
				url: '../views/webHTML/webHTML?index=0'
			});
		},
		toUserMsg() {
			uni.navigateTo({
				url: '../userManagement/userManagement'
			});
		},
		// 优惠券
		goDiscount() {
			uni.navigateTo({
				url: '../discount/discount'
			});
		},
		// 车站查询
		goInquire() {
			uni.navigateTo({
				url: '../departInquire/departInquire'
			});
		},
		// 绑定手机号
		binding() {
			uni.navigateTo({
				url: '../binding/binding'
			});
		}
	}
};
</script>

<style scoped>
#wxcontact {
	padding: 0;
	width: 90%;
	top: -26rpx;
	text-align: left;
	font-size: 32upx;
	position: relative;
	display: inline-block;
	background-color: #ffffff;
}
#wxcontact::after {
	border: none;
}
.bgc {
	width: 100%;
	height: 100%;
	padding-top: 50upx;
	background: linear-gradient(#01a1ea, #ffffff);
}

.persoanl {
	width: 95%;
	margin: auto;
	height: 200upx;
	background-image: url(../../static/img/meBackground.png);
	background-size: 100%;
}

.persoanl text {
	color: #ffffff;
}

.portrait {
	width: 120upx;
	height: 120upx;
	margin-top: 7%;
	margin-left: 5%;
	border-radius: 50%;
	border: 1px solid #ffffff;
}

.information {
	position: relative;
	margin-top: -17%;
	margin-left: 30%;
	/* margin-top: -80upx; */
}

.informations {
	margin-top: 2%;
	margin-left: 30%;
}

.lists {
	width: 95%;
	margin: auto;
	height: 650upx;
	margin-top: 10upx;
	border-radius: 10upx;
	background-color: #ffffff;
	box-shadow: 0upx 0upx 10upx 0upx #ffffff;
	box-shadow: 0 10upx 10upx 0 #e6e6e6;
}

.rider {
	display: flex;
	height: 50upx;
	padding-top: 30upx;
	margin-left: 30upx;
}

.rider image {
	width: 60upx;
	height: 60upx;
}

.othertext {
	width: 100%;
	margin-top: 10upx;
	font-size: 32upx;
	margin-left: 20upx;
}

.othertext image {
	float: right;
	width: 45upx !important;
	height: 45upx !important;
}

.othertext text {
	float: right;
	color: #007aff;
	padding-right: 15upx;
}

.rider_s {
	display: flex;
	height: 50upx;
	padding-top: 40upx;
	margin-left: 30upx;
}

.rider_s image {
	width: 60upx;
	height: 60upx;
}
</style>
